<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('样品试用')"/>
    <link rel="stylesheet" th:href="@{/static/js/plugins/jquery-layout/jquery.layout-latest.css}">
    <link rel="stylesheet" th:href="@{/static/js/editable/css/bootstrap-editable.css}">
</head>

<body class="gray-bg">

<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 search-condition">
            <form id="sampleItemForm" th:action="@{/qualityControlTest/list}" class="form-inline">
                <div class="select-list">
                    <ul>
                        <li class="col-sm-3" style="width: 33%">
                            <label style="width: 120px">采购凭证号：</label>
                            <input type="text" name="poNo" />
                        </li>
                        <li class="col-sm-3" style="width: 33%">
                            <label style="width: 120px">订单类型：</label>
                            <select name="poType" sysDict="CGDDLX" emptyFirst="true"></select>
                        </li>
                        <li class="col-sm-3" style="width: 33%">
                            <label style="width: 120px">供应商SAP编码：</label>
                            <input type="text" name="sapCode"/>
                        </li>
                        <li class="col-sm-3" style="width: 33%">
                            <label style="width: 120px">供应商SRM编码：</label>
                            <input type="text" name="srmCode"/>
                        </li>
                        <li class="col-sm-3" style="width: 33%">
                            <label style="width: 120px">采购组：</label>
                            <select name="purchGroup" sysDict="CGZ" emptyFirst="true"></select>
                        </li>
                        <li class="col-sm-3" style="width: 33%">
                            <label style="width: 120px">物料编码：</label>
                            <input type="text" name="materialCode" />
                        </li>

                        <li class="col-sm-3" style="width: 33%">
                            <label style="width: 120px">物料描述：</label>
                            <input type="text" name="materialDesc" />
                        </li>
                        <li class="col-sm-3" style="width: 33%">
                            <button id="sampleItemSearchBtn" type="button" class="btn btn-primary btn-rounded btn-sm"><i class="fa fa-search"></i>&nbsp;搜索</button>
                            <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i class="fa fa-eraser"></i>&nbsp;重置</button>
                            <button id="sampleItemAdvancedSearch" type="button" class="btn btn-primary btn-rounded btn-sm" style="display: none"><i class="fa fa-caret-down"></i>&nbsp;高级搜索</button>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-info order-table">
            <div class=" hidden-xs toolbar" id="sampleItemToolBar" role="group">
                <a class="btn btn-outline btn-success btn-rounded" onclick="showUploadDialog()">
                    <i class="fa fa-upload"></i> 上传报告
                </a>
                <a class="btn btn-outline btn-success btn-rounded" onclick="showdownloadDialog()">
                    <i class="fa fa-download"></i> 下载报告
                </a>
                <a class="btn btn-outline btn-success btn-rounded" onclick="showReportDetailDialog()">
                    <i class="fa fa-search"></i> 查看报告
                </a>
            </div>
            <table id="sampleItem" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<script th:src="@{/static/js/plugins/bootstrap-table/bootstrap-table-zh-CN.js}"></script>
<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script type="text/javascript" th:src="@{/static/js/plugins/jquery-layout/jquery.layout-latest.js}"></script>

<!--上传报告-->
<div id="uploadModal" style="display: none">
    <div class="modal-body">
        <form id="uploadForm" enctype="multipart/form-data">
            <div style="margin-top:20px">
                <label><b>上传类型：</b></label>
                <select id="uploadSelect" name="uploadType">
                </select>
                <label style="color: red">*</label>
            </div>
            <div style="margin-top:20px"><label><b>选择文件：</b></label><input type="file" name="reportFile" id="reportFile" style="display:inline"> <label style="color: red">*</label></div>
            <div style="margin-top:20px"><label><b>备注：</b></label><textarea id="remark" name="remark" style="width:80%; height:150px;"></textarea></div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" onclick='closeDialog()'>关闭</button>
        <button type="button" class="btn btn-primary" onclick='uploadReport()'>确定</button>
    </div>
</div>

<!--下载报告-->
<div id="downloadModal" style="display: none">
    <div class="modal-body">
        <form id="downloadForm" method="post">
            <div class="checkbox" id="downloadCheckbox">
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" onclick='closeDialog()'>关闭</button>
        <button type="button" class="btn btn-primary" onclick='downloadReport()'>确定</button>
    </div>
</div>

<!--查看报告-->
<div id="reportDetailModal" style="display: none">
    <div class="modal-body">
        <table class="table" id="reportDetailTable">
            <thead>
            <tr>
                <th data-field="type">报告类型</th>
                <th data-field="isUpload">是否上传</th>
                <th data-field="time">上传时间</th>
                <th data-field="remark">备注</th>
            </tr>
            </thead>
        </table>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" onclick='closeDialog()'>关闭</button>
    </div>
</div>

<script type="text/javascript">
    //面向对象
    var searcherBS = Searcher.createBS('#sampleItem',
        [
            {radio: true},
            {title: '采购凭证号', field:'poNo'},
            {title: '订单确认状态', field:'itemStatus',
                formatter : function (value, row, index) {
                    if(value ==0) {
                        return "草稿";
                    } else if(value == -1) {
                        return "订单已经取消";
                    }else if(value == 1) {
                        return "订单已确认";
                    }else if(value == 2) {
                        return "分批发货";
                    }else if(value == 3) {
                        return "订单发货完毕";
                    }else if(value==4){
                        return "SAP同步成功";
                    }
                }
            },
            {title: '行项目号', field:'itemNo'},
            {title: '物料编码', field:'materialCode'},
            {title: '物料描述', field:'materialDesc'},
            {title: '工厂', field:'factory'},
            {title: '库存地点', field:'storageLocation'},
            {title: '物料组', field:'materialGroup'},
            {title: '需求者姓名', field:'requester'},
            {title: '采购订单数量', field:'poCount'},
            {title: '待发货的数量',field:'backOrders'},
            {title: '采购订单的计量单位', field:'poUnit'},
            {title: '含税单价', field:'poPrice'},
            {title: '价格单位', field:'priceUnit'},
            {title: '税码', field:'taxCode'},
            {title: '订单总价值', field:'totalPrice'},
            {title: '发票收据标识', field:'receiveFlag'},
            {title: '采购申请编号', field:'prNo'},
            {title: '采购申请的项目编号', field:'prItemNo'},
            {title: '交货日期', field:'deliveryDate'},
            {title: '成本中心', field:'costCenter'},
            {title: '备注', field:'remark'},
            {title: '是否已收货', field:'receiptedFlag'},
            {title: '订单类型', field:'poType'},
            {title: '供应商', field:'vendorId'},
            {title: '公司代码', field:'companyCode'},
            {title: '采购组', field:'purchGroup'},
            {title: '采购组织', field:'purchOrg'},
            {title: '采购订单更改日期', field:'sapUtime'},
            {title: '付款条件代码', field:'payCondition'},
            {title: '国际贸易条款', field:'i18nTradeTerms'},
            {title: '货币码', field:'currencyCode'},
            {title: '公司名称', field:'companyName'},
            {title: '国家', field:'country'},
            {title: '城市', field:'city'},
            {title: '电话', field:'telNo'},
            {title: '审批流程状态', field:'state'},
            {title: '供应商名称', field:'vendorName'},
            {title: '创建日期', field:'creationDate'},
            {title: 'url', field:'url'},
            {title: "二维码下载",field:'',
                formatter: function(value,row,index){
                    return '<a class="btn btn-outline btn-success btn-rounded" onclick="Download(\' ' + row.poItemId + ' \');">二维码下载</a>';
                }
            },
            {title: "试用报告备注",field:'',
                formatter: function(value,row,index){
                    var result='';
                    //用'║'将上传文件备注分隔开
                    if(row.reportFirstRemark){
                        result+=row.reportFirstRemark;
                    }
                    if(result&&row.reportSecondRemark){
                        result+=" ║ "+row.reportSecondRemark;
                    }else if(row.reportSecondRemark){
                        result+=row.reportSecondRemark;
                    }
                    if(result&&row.reportThirdRemark){
                        result+=" ║ "+row.reportThirdRemark;
                    }else if(row.reportThirdRemark){
                        result+=row.reportThirdRemark;
                    }
                    return result;
                }
            },
            {title: "供应商承认书备注",field:'supplierConfirmRemark',
                formatter: function(value,row,index){
                var val='';
                if(value){
                    val=value;
                }
                if(row.supplierConfirmFile){
                    return "<img src='" + ctxPath + "/img/duicuo/dui.png' width='20px' />"+val;
                }
                    return "<img src='" + ctxPath + "/img/duicuo/cuo.png' width='20px' />"+val;
                }
            },
            {title: "有害物质报告备注",field:'harmfulSubstanceRemark',
                formatter: function(value,row,index){
                    var val='';
                    if(value){
                        val=value;
                    }
                    if(row.harmfulSubstanceFile){
                        return "<img src='" + ctxPath + "/img/duicuo/dui.png' width='20px' />"+val;
                    }
                    return "<img src='" + ctxPath + "/img/duicuo/cuo.png' width='20px' />"+val;
                }
            },
            {title: "MSDS&材料成分表备注",field:'msdsRemark',
                formatter: function(value,row,index){
                    var val='';
                    if(value){
                        val=value;
                    }
                    if(row.msdsFile){
                        return "<img src='" + ctxPath + "/img/duicuo/dui.png' width='20px' />"+val;
                    }
                    return "<img src='" + ctxPath + "/img/duicuo/cuo.png' width='20px' />"+val;
                }
            },
            {title: "不使用冲突矿石备注",field:'conflictMineralRemark',
                formatter: function(value,row,index){
                    var val='';
                    if(value){
                        val=value;
                    }
                    if(row.conflictMineralFile){
                        return "<img src='" + ctxPath + "/img/duicuo/dui.png' width='20px' />"+val;
                    }
                    return "<img src='" + ctxPath + "/img/duicuo/cuo.png' width='20px' />"+val;
                }
            }
        ]
    );
    function Download(obj){
        var poItemId = obj;
        window.location.href = ctxPath + "/orderItem/toDwnload?id="+poItemId;
    }

    /**
     * 查询数据
     */
    function refresh() {
        searcherBS.refresh();
    }
    /*
    *初始化所有字典数据
    */
    $(function () {
        initDictDataSel();
    });

    /**
     *上传报告
     */
    function showUploadDialog() {
        var rowData = searcherBS.getRawData();
        if (rowData.length == 0) {
            Dialog.errorMsg("请选择一行进行上传！");
            return;
        }
        rowData=rowData[0];
        //报告均已上传
        if(rowData.uploadFlag==3&&rowData.supplierConfirmFile&&rowData.harmfulSubstanceFile&&rowData.msdsFile&&rowData.conflictMineralFile){
            Dialog.errorMsg("所有报告均已上传！");
            return;
        }
        //上传报告窗口
        Dialog.open('文件上传', $("#uploadModal"),{area : ['500px','450px']});
        //动态添加select选项
        var node="<option value=''>===选择类型===</option>";
        if(!rowData.reportFirstFile){
            node+="<option value='reportFirstFile'>第一次试用报告</option>";
        }else if(!rowData.reportSecondFile){
            node+="<option value='reportSecondFile'>第二次试用报告</option>";
        }else if(!rowData.reportThirdFile){
            node+="<option value='reportThirdFile'>第三次试用报告</option>";
        }
        if(!rowData.supplierConfirmFile){
            node+="<option value='supplierConfirmFile'>供应商承认书</option>";
        }
        if(!rowData.harmfulSubstanceFile){
            node+="<option value='harmfulSubstanceFile'>有害物质报告</option>";
        }
        if(!rowData.msdsFile){
            node+="<option value='msdsFile'>MSDS&材料成分表</option>";
        }
        if(!rowData.conflictMineralFile){
            node+="<option value='conflictMineralFile'>不使用冲突矿石</option>";
        }
        $("#uploadSelect").html(node);
    }

    //弹框取消
    function closeDialog(){
        layer.closeAll();
    }

    function uploadReport(){
        var uploadSelect=$("#uploadSelect").val();
        if(!uploadSelect){
            Dialog.errorMsg("请选择上传文件类型！");
            return;
        }
        var reportFile=$("#reportFile").val();
        if(!reportFile){
            Dialog.errorMsg("请上传文件！");
            return;
        }
        var rowData = searcherBS.getRawData()[0];
        var formData=new FormData($('#uploadForm')[0]);
        uploadFlag=rowData.uploadFlag;
        if(uploadFlag==undefined||uploadFlag==''||uploadFlag==null){
            uploadFlag=0;
        }
        formData.append("uploadFlag",uploadFlag);
        formData.append("poItemId",rowData.poItemId);
        uploadId=rowData.uploadId;
        if(uploadId==undefined||uploadId==null){
            uploadId='';
        }
        formData.append("uploadId",uploadId);
        layer.load(1,{shade: [0.3, '#393D49']});
        $.ajax({
            url: ctxPath + "/qualityControlTest/upload",
            type: 'POST',
            data: formData, // 上传formdata封装的数据包
            dataType: 'JSON',
            cache: false, // 不缓存
            processData: false, // jQuery不要去处理发送的数据
            contentType: false, // jQuery不要去设置Content-Type请求头
            success: function (data) {
                layer.closeAll();
                if (data.result) {
                    Dialog.msg("操作成功!", function () {
                    });
                } else {
                    Dialog.errorMsg("操作失败，请重新上传!");
                }
                searcherBS.refresh();
                //清除表单内容
                $("#reportFile").val("");
                $("#remark").val("");
            }
        });
    }

    /**
     *下载报告
     */
    function showdownloadDialog() {
        var rowData = searcherBS.getRawData();
        if (rowData.length == 0) {
            Dialog.errorMsg("请选择一行进行下载！");
            return;
        }
        rowData=rowData[0];
        var uploadFlag=rowData.uploadFlag;
        if(uploadFlag==undefined||uploadFlag==null||uploadFlag==''){
            uploadFlag=0;
        }
        if(uploadFlag==0&&!rowData.supplierConfirmFile&&!rowData.harmfulSubstanceFile&&!rowData.msdsFile&&!rowData.conflictMineralFile){
            Dialog.errorMsg("没有报告上传！");
            return;
        }
        //文件下载路径
        var filePath=new Array();
        filePath[0]=rowData.reportFirstFile;
        filePath[1]=rowData.reportSecondFile;
        filePath[2]=rowData.reportThirdFile;
        var node='';
        for(var i=0;i<uploadFlag;i++){
            node+="<div style='margin:20px;font-size:1.3em'><label><input type='checkbox' style='margin-top: 6px;' name='files' value='"+filePath[i]+"'>第 "+(i+1)+" 次试用报告</label></div>";
        }
        if(rowData.supplierConfirmFile){
            node+="<div style='margin:20px;font-size:1.3em'><label><input type='checkbox' style='margin-top: 6px;' name='files' value='"+rowData.supplierConfirmFile+"'>供应商承认书</label></div>";
        }
        if(rowData.harmfulSubstanceFile){
            node+="<div style='margin:20px;font-size:1.3em'><label><input type='checkbox' style='margin-top: 6px;' name='files' value='"+rowData.harmfulSubstanceFile+"'>有害物质报告</label></div>";
        }
        if(rowData.msdsFile){
            node+="<div style='margin:20px;font-size:1.3em'><label><input type='checkbox' style='margin-top: 6px;' name='files' value='"+rowData.msdsFile+"'>MSDS&材料成分表</label></div>";
        }
        if(rowData.conflictMineralFile){
            node+="<div style='margin:20px;font-size:1.3em'><label><input type='checkbox' style='margin-top: 6px;' name='files' value='"+rowData.conflictMineralFile+"'>不使用冲突矿石</label></div>";
        }
        $("#downloadCheckbox").html(node);
        //下载报告窗口
        Dialog.open("下载文件", $("#downloadModal"),{area : ['400px','500px']});
    }

    function downloadReport(){
        $("#downloadForm").attr("action",ctxPath + "/qualityControlTest/download");

        var checkReports=$("input[name='files']:checked");
        var len=checkReports.length;
        if(len==0){
            Dialog.errorMsg("请选择要下载的试用报告！");
            return;
        }
        $("#downloadForm").submit();
        layer.closeAll();
    }

    /**
     *查看报告
     */
    function showReportDetailDialog() {
        var rowData = searcherBS.getRawData();
        if (rowData.length == 0) {
            Dialog.errorMsg("请选择一行进行查看！");
            return;
        }
        rowData = rowData[0];
        var tableData = new Array();
        var supplierConfirmFile = {type: '供应商承认书', isUpload: "否", time: '', remark: ''};
        var harmfulSubstanceFile = {type: '有害物质报告', isUpload: "否", time: '', remark: ''};
        var msdsFile = {type: 'MSDS&材料成分表', isUpload: "否", time: '', remark: ''};
        var conflictMineralFile = {type: '不使用冲突矿石', isUpload: "否", time: '', remark: ''};
        var reportFirstFile = {type: '第一次试用报告', isUpload: "否", time: '', remark: ''};
        var reportSecondFile = {type: '第二次试用报告', isUpload: "否", time: '', remark: ''};
        var reportThirdFile = {type: '第三次试用报告', isUpload: "否", time: '', remark: ''};
        //第一次试用报告
        if (rowData.reportFirstFile) {
            reportFirstFile.isUpload = "是";
            reportFirstFile.time = rowData.reportFirstFile.substring(rowData.reportFirstFile.lastIndexOf("_") + 1, rowData.reportFirstFile.lastIndexOf(".")).replace(/~/g,':');
        }
        if (rowData.reportFirstRemark) {
            reportFirstFile.remark = rowData.reportFirstRemark;
        }
        //第二次试用报告
        if (rowData.reportSecondFile) {
            reportSecondFile.isUpload = "是";
            reportSecondFile.time = rowData.reportSecondFile.substring(rowData.reportSecondFile.lastIndexOf("_") + 1, rowData.reportSecondFile.lastIndexOf(".")).replace(/~/g,':');
        }
        if (rowData.reportSecondRemark) {
            reportSecondFile.remark = rowData.reportSecondRemark;
        }
        //第三次试用报告
        if (rowData.reportThirdFile) {
            reportThirdFile.isUpload = "是";
            reportThirdFile.time = rowData.reportThirdFile.substring(rowData.reportThirdFile.lastIndexOf("_") + 1, rowData.reportThirdFile.lastIndexOf(".")).replace(/~/g,':');
        }
        if (rowData.reportThirdRemark) {
            reportThirdFile.remark = rowData.reportThirdRemark;
        }
        //供应商承认书
        if (rowData.supplierConfirmFile) {
            supplierConfirmFile.isUpload = "是";
            supplierConfirmFile.time = rowData.supplierConfirmFile.substring(rowData.supplierConfirmFile.lastIndexOf("_") + 1, rowData.supplierConfirmFile.lastIndexOf(".")).replace(/~/g,':');
        }
        if (rowData.supplierConfirmRemark) {
            supplierConfirmFile.remark = rowData.supplierConfirmRemark;
        }
        //有害物质报告
        if (rowData.harmfulSubstanceFile) {
            harmfulSubstanceFile.isUpload = "是";
            harmfulSubstanceFile.time = rowData.harmfulSubstanceFile.substring(rowData.harmfulSubstanceFile.lastIndexOf("_") + 1, rowData.harmfulSubstanceFile.lastIndexOf(".")).replace(/~/g,':');
        }
        if (rowData.harmfulSubstanceRemark) {
            harmfulSubstanceFile.remark = rowData.harmfulSubstanceRemark;
        }
        //MSDS&材料成分表
        if (rowData.msdsFile) {
            msdsFile.isUpload = "是";
            msdsFile.time = rowData.msdsFile.substring(rowData.msdsFile.lastIndexOf("_") + 1, rowData.msdsFile.lastIndexOf(".")).replace(/~/g,':');
        }
        if (rowData.msdsRemark) {
            msdsFile.remark = rowData.msdsRemark;
        }
        //不使用冲突矿石
        if (rowData.conflictMineralFile) {
            conflictMineralFile.isUpload = "是";
            conflictMineralFile.time = rowData.conflictMineralFile.substring(rowData.conflictMineralFile.lastIndexOf("_") + 1, rowData.conflictMineralFile.lastIndexOf(".")).replace(/~/g,':');
        }
        if (rowData.conflictMineralRemark) {
            conflictMineralFile.remark = rowData.conflictMineralRemark;
        }
        tableData[0] = supplierConfirmFile;
        tableData[1] = harmfulSubstanceFile;
        tableData[2] = msdsFile;
        tableData[3] = conflictMineralFile;
        tableData[4] = reportFirstFile;
        tableData[5] = reportSecondFile;
        tableData[6] = reportThirdFile;
        //查看报告窗口
        Dialog.open("查看报告", $("#reportDetailModal"), {area: ['800px', '480px']});
        $("#reportDetailTable").bootstrapTable('destroy');
        $('#reportDetailTable').bootstrapTable({data: tableData});
    }

</script>
</body>
</html>